<template>
    <div :class="$style.welcome">
      <img v-if="logo === 'node'" :class="$style.logo" src="./logo/node.jpg"/>
      <img v-if="logo === 'vue'" :class="$style.logo" src="./logo/vue.svg"/>
      <h1>欢迎使用全栈式 Vue 3  框架</h1>
      <el-button v-if="count" @click="onLikeButtonClick">点赞({{ count }})</el-button>
      <el-button v-else @click="onLikeButtonClick">点赞</el-button>
      <h3 v-if="name">当前工程运行项目: {{ name }}</h3>
    </div>
</template>

<script setup>

import {
  ref
} from 'vue' ;

defineProps({
  name:{
    type:String
  },
  logo:{
    type:String,
    default:'node'
  }
}) ;

const emit = defineEmits([
  'like'
]) ;

const count = ref(0) ;

function onLikeButtonClick(){

  count.value ++ ;

  emit('like') ;

}

</script>

<style lang="scss" module>

.welcome{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 40px 30px;
  > .logo{
    width: 215px;
    height: 215px;
  }
}

</style>